<!--<template>
  <div class="sys-query">
    <el-form v-bind="formProps">
      <el-row v-bind="rowProps">
        <el-col v-if="$slots.default"
                v-for="(item, index) in $slots.default"
                :key="index">

        </el-col>
      </el-row>
    </el-form>
  </div>
</template>-->

<script>
/* eslint-disable */

import {Form, Row, Col} from 'element-ui'
import {simpleClearForm} from './common'

/**
 * form表单自动布局组件(适用于列表查询和不复杂的表单提交)
 * 默认情况下布局 xs: 24, sm: 12, md: 8, xl: 6
 * slots default 默认
 * slots actions 按钮插槽
 * slots tools 查询工具栏
 */
export default {
  name: 'sys-query',
  cnName: '查询条件-布局',
  components: {
    ElForm: Form,
    ElRow: Row,
    ElCol: Col
  },
  /**
   * 属性参数
   * @member props
   * @property {String} [labelWidth] el-form labelWidth属性
   * @property {String} [labelPosition] el-form labelPosition属性
   * @property {String} [size] el-form size属性
   * @property {Object} [model] el-form model属性
   * @property {Object|Number} [columns] el-col属性 【子节点的span属性优先级高于columns属性】
   * @property {Object|Number} [gutter] el-row gutter属性
   * @property {Boolean} [showTools] 是否显示工具栏
   * @property {Boolean} [showAddBtn] 是否显示新增按钮 默认: false
   * @property {Boolean} [isSimple] 是否是简单模式 默认: false
   * @property {Boolean} [simpleAble] 是否允许简单模式 默认: true
   * @property {Boolean} [simpleNum] 简单模式下展示的前几条数据
   * @property {Boolean} [showShadow] 是否显示阴影 默认: true
   *@property {Boolean} [showShadow] 是否显示按钮 默认: true
   */
  props: {
    ...Form.props,
    labelWidth: {
      type: String,
      default: '100px'
    },
    labelPosition: {
      type: String,
      default: 'right'
    },
    size: {
      type: String,
      default: 'small'
    },
    model: Object,
    rule: Object,
    columns: {
      type: [Object, Number],
      default() {
        return {
          xs: 24,
          sm: 12,
          lg: 8,
          xl: 6
        }
      },
      validator(val) {
        return typeof val === 'number' ? 24 % val === 0 : true
      }
    },
    gutter: {
      type: Number,
      default: 12
    },
    showTools: {
      type: Boolean,
      default: true
    },
    showAddBtn: {
      type: Boolean,
      default: false
    },
    addText: {
      type: String,
      default: '新增'
    },
    queryText: {
      type: String,
      default: '查询'
    },
    clearText: {
      type: String,
      default: '清空'
    },
    isSimple: {
      type: Boolean,
      default: true
    },
    simpleAble: {
      type: Boolean,
      default: false
    },
    simpleNum: {
      type: Number,
      default: 1
    },
    showShadow: {
      type: Boolean,
      default: true
    },
    inline: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currIsSimple: this.isSimple
    }
  },
  methods: {
    query() {
      this.$emit('query', this.model)
    },
    clear() {
      simpleClearForm(this.model)
      this.$emit('clear', this.model)
    },
    add() {
      this.$emit('add')
    },
    toggle() {
      this.currIsSimple = !this.currIsSimple
      this.$emit('update:isSimple', this.currIsSimple)
    },
    getColRender(o) {
      let props = this.colProps
      if(o && o.data) {
        const attrs = o.data.attrs
        if(attrs) {
          const span = attrs.span // 使用子组件的span
          if(span) {
            props = {span}
          }
        }
      }

      return (
        <el-col {...{props: props}}>
          {o}
        </el-col>
      )
    },
    getActionRender() {
      let addBtn = ''
      if(this.showAddBtn) {
        addBtn = <el-button icon="el-icon-plus" size="small" type="primary" onClick={this.add}>{this.addText}</el-button>
      }

      return (
        <div class="action-inner">
          <el-button icon="el-icon-search" size="small" type="primary" onClick={this.query}>{this.queryText}</el-button>
          <el-button icon="el-icon-refresh-right" size="small" onClick={this.clear}>{this.clearText}</el-button>
          {addBtn}
          {this.$slots.actionAppend}
        </div>
      )
    },
    getAction() {
      return this.$slots.action ? this.$slots.action : this.getActionRender()
    }
  },
  watch: {
    isSimple(val) {
      this.currIsSimple = val
    }
  },
  computed: {
    rowProps() {
      return {
        gutter: this.gutter
      }
    },
    colProps() {
      let prop = {}

      if (typeof this.columns === 'number') {
        prop.span = this.columns
      } else {
        prop = {...this.columns}
      }
      return prop
    },
    formProps() {
      const formKeys = Object.keys(Form.props)
      const prop = {}
      Object.keys(this.$props).forEach(key => {
        if (formKeys.includes(key) && this.$props[key]) {
          prop[key] = this.$props[key]
        }
      })
      return prop
    }
  },
  mounted() {
  },
  render() {
    const slots = this.$slots.default
    let cols = []

    const simpleClas = this.currIsSimple ? 'simple' : ''
    const boxClas = this.showShadow ? 'is-box' : ''

    // 默认的插槽
    if(slots) {
      if(this.currIsSimple) {
        slots.some((o, index) => {
          cols.push(this.getColRender(o))
          return index >= this.simpleNum - 1
        })
        cols.push(this.getColRender(this.getAction()))
      } else {
        cols = slots.map(o => {
          return this.getColRender(o)
        })

        if(this.inline) {
          cols.push(this.getColRender(this.getAction()))
        }
      }
    }

    /**
     * 工具栏插槽
     * 非简单模式下,工具栏
     */
    let tools = ''
    if(this.showTools && !this.currIsSimple) {
      // action - 按钮或插槽
      const actions = !this.inline && this.getAction()

      const toolBar = this.$slots.toolBar ? this.$slots.toolBar : ''

      if(this.$slots.tools) {
        tools = (
          <div class="sys-query-tools">
            {this.$slots.tools}
          </div>
        )
      } else if(toolBar && actions) {
        tools = (
          <div class="sys-query-tools">
            {actions}
            <div class="sys-query-tools__action">
              {toolBar}
            </div>
          </div>
        )
      }
    }

    return (
      <div class={['sys-query', simpleClas, boxClas]}>
        <el-form ref="form" {...{props: this.formProps}}>
          <el-row {...{props: this.rowProps}}>
            {cols}
          </el-row>
          {tools}
        </el-form>
        {
          this.simpleAble
            ?
            (
              <span class="sys-query-toggle" onClick={this.toggle}>
                <i class="el-icon-d-arrow-left" />
                </span>
            ) : ''
        }
      </div>
    )
  }
}
</script>

<style lang="scss" scoped>
.sys-query {
  position: relative;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;

  &.is-box {
    box-shadow: 0px 2px 6px #888;
  }

  &-tools {
    height: 50px;
    line-height: 50px;
    position: relative;

    &__action {
      position: absolute;
      line-height: 1;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
    }

  }

  .action-inner {
    text-align: left;
  }

  &-toggle {
    position: absolute;
    right: -1px;
    bottom: -3px;
    transform: rotate(-45deg);
    cursor: pointer;
    z-index: 2;
    color: #1890ff;

    i {
      transform: rotate(90deg);
    }

    &:active {
      opacity: .7;
    }
  }

  &.simple {
    .sys-query-toggle i{
      transform: rotate(-90deg);
    }

    &:after {
      display: none;
      content: "";
      position: absolute;
      bottom: 0px;
      height: 30px;
      left: 0;
      right: 0;
      z-index: 1;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0,0,0, .1));
    }
  }

  /deep/ {
    .el-form-item {
      width: 100%;
      display: flex;

      &__content {
        flex: 1;
      }
    }
    .el-select, .el-input__inner, .el-date-editor.el-input, .el-cascader {
      width: 100%;
    }


    [class*=el-col-] {
      min-height: 51px  ;
    }
  }
}
</style>
